<template>
  <div>
    <ContentTitle :info="ctInfo">
      <el-button type="primary" @click="skipadd">新增</el-button>
    </ContentTitle>
    <List
      :tableData="tableData"
      @edit="edit"
      @del="del"
      :dialogVisible="dialogVisible"
    ></List>
    <Vue
      @allclick="allclick"
      :row="row"
      :dialogVisible.sync="dialogVisible"
      :isEdit="isEdit"
    />
  </div>
</template>

<script>
import List from "./components/list.vue";
import Vue from "./components/vue.vue";
import { $measurementAdd } from "@/api/index";
import ContentTitle from "@/components/ContentTitle";
import {
  $measurementDel,
  $measurementEdit,
  $measurementList,
} from "@/api/index";
export default {
  components: {
    ContentTitle,
    List,
    Vue,
  },
  data() {
    return {
      row: {
        id: "",
        name: "",
        unit: "",
        cTime: "",
        uTime: "",
      },
      //判断是否是编辑状态
      isEdit: true,
      dialogVisible: false,
      ctInfo: {
        type: "测量",
        text: "测量类型的增删改查",
        msg: "展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
      },
      tableData: [],
    };
  },
  created() {
    this.list();
  },
  methods: {
    onchedr(data) {
      this.dialogVisible = data;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //新添按钮
    skipadd() {
      this.isEdit = false;
      //打卡对话框
      this.dialogVisible = true;
      this.row.name="",
      this.row.unit=""
    },
    allclick() {
      if (this.isEdit) {
        $measurementEdit(this.row).then((res) => {
          this.row = res.data;
          this.list();
          //关闭对话框
          this.dialogVisible = false;
        });
      } else {
        this.obj1 = this.row.name;
        this.obj2 = this.row.unit;
        $measurementAdd({ name: this.obj1, unit: this.obj2 }).then((res) => {
          this.list();
          this.dialogVisible = false;
        });
      }
    },
    edit(row) {
      this.isEdit = true;
      this.row = row;
      this.dialogVisible = true;
    },
    //渲染画面
    list() {
      $measurementList().then((res) => {
        this.tableData = res.data;
      });
    },
    //删除
    del(row) {
      $measurementDel({ id: row.id }).then((res) => {});
      this.list();
    },
  },
};
</script>

<style>
.cell {
  text-align: center;
}
</style>